<template>
  <div class="main">watchEffect：面试题：{{ count }}</div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(1);
const num = ref(100);

// 组件一加载，就会立即执行watchEffect的回调函数
// watchEffect里面使用过的响应式数据发生了改变，就会执行回调函数
// 与watch相比，不需要固定的指定要监听的数据，初始化的时候会自动执行一遍，不需要指定immediate
// watch，watchEffect 他们两个 的回调函数，都是在 dom更新之前就会执行。如果要在回调函数里面获取dom更新以后的数据，那么就需要添加一个配置  flush:post ，这个时候，监听器的回调函数，就是在dom更新以后在执行
watchEffect(
  () => {
    // 当回调函数里面 有响应式数据发生了改变，就会自动指向这个回调函数
    console.log('watcheffect回调函数', count.value, num.value);
    console.log(document.querySelector('.main')?.innerHTML);
  },
  { flush: 'post' }
);

setTimeout(() => {
  count.value++;
}, 2000);

// setTimeout(() => {
//   num.value++;
// }, 4000);
</script>
